<template>
    <div class="login-container">
        <img src="../../assets/logo.png" class="logo-box animated zoomInDown" />
        <el-form class="login-form animated zoomInUp" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">
            <h3 class="title">B端商家管理后台</h3>
            <el-form-item prop="username">
                <span class="svg-container svg-container_login">
                    <svg-icon icon-class="user" />
                </span>
                <el-input name="username" type="number" maxLength="11" v-model="loginForm.username" placeholder="账号" />
            </el-form-item>
            <el-form-item prop="password">
                <span class="svg-container">
                    <svg-icon icon-class="password"></svg-icon>
                </span>
                <el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" maxLength="12" v-model="loginForm.password" autoComplete="on"
                    placeholder="请输入密码">
                </el-input>
                <span class="show-pwd" @click="showPwd">
                    <svg-icon icon-class="eye" />
                </span>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">登录</el-button>

            </el-form-item>
            <p class="comText">广州前实网络科技有限公司 © 2018 All Rights Reserved</p>
        </el-form>
    </div>
</template>

<script>
    import {
        isvalidUsername
    } from '@/utils/validate'
    import {
        mapMutations,
        mapGetters
    } from 'vuex'
    import {
        getToken,
        setToken
    } from '@/utils/auth'
    import {
        SUCCESS_REQUEST_STATUS,
        secondDirectory,
				tabList
    } from '@/utils/config.js'
    import Layout from '../../views/layout/Layout'
    //import Cookies from 'js-cookie'
    export default {
        name: 'login',
        data() {
            // 验证用户名
            const validateUsername = (rule, value, callback) => {
                !value ? callback(new Error('账号不能为空')) : value.length < 1 ? callback(new Error('请输入11位数字号码')) :
                    callback()

            }
            // 验证密码
            const validatePass = (rule, value, callback) => {
                !value ? callback(new Error('密码不能为空')) : value.length < 6 ? callback(new Error('密码不能少于6位')) :
                    callback()
            }
            return {
                loginForm: {
                    username: '15914214001',
                    password: '123456'
                },
                loginRules: {
                    username: [{
                        required: true,
                        trigger: 'blur',
                        validator: validateUsername
                    }],
                    password: [{
                        required: true,
                        trigger: 'blur',
                        validator: validatePass
                    }]
                },
                loading: false,
                pwdType: 'password'
            }
        },

        methods: {
            // 密码是否可看
            showPwd() {
                this.pwdType = this.pwdType === 'password' ? '' : 'password'
            },
            // 登录操作
            handleLogin() {
                this.loading = true
                this.$ajax({
                    api: 'admin/login',
                    params: {
                        loginName: this.loginForm.username,
                        password: this.loginForm.password
                    }
                }).then(res => {
                    if (res.status === SUCCESS_REQUEST_STATUS) {
                        console.log(res)
												setToken(res.data.token)
												window.localStorage.setItem('merchantUserId', res.data.merchantUserId)
												window.localStorage.setItem('menuList', JSON.stringify(res.data.menuList))
												for(let i in secondDirectory) {
													console.log(i)
													res.data.menuList.forEach((item) => {
														if(item.name == i){
															console.log()
															item.childMenu.forEach((cel,index) =>　{
																secondDirectory[i].list[index].show = cel.select
																tabList[i][0].title = item.childMenu[0].menuName
															})
														}
													})
												}
												this.$router.push({
													path: `/${res.data.menuList[0].name}`
												})	
                       
                    }
                }).catch(err => {
                    this.$message({
                        message: err.message,
                        type: 'error'
                    });
                    this.loading = false

                })
            },
           

//             ...mapMutations({
//                 setSecondDirectory: 'SET_SECOND_DIRECTORY',
//                 setTabList: 'SET_TAB_LIST'
//             }),
        },
        created() {
            console.log(setToken())
        },
        computed: {
            ...mapGetters([
                'secondDirectory'
            ])
        }
        //         computed: {
        //             ...mapGetters(['merchantInfo'])
        //         }
    }
</script>

<style rel="stylesheet/scss" lang="scss">
    $bg:#2d3a4b;
    $light_gray:#eee;
    $dark_gray:#889aa4;

    .login-container {
        position: fixed;
        height: 100%;
        width: 100%;
        background-color: $bg;
        .el-input {
            display: inline-block;
            height: 47px;
            width: 85%;
            input {
                background: transparent;
                border: 0px;
                -webkit-appearance: none;
                border-radius: 0px;
                padding: 12px 5px 12px 15px;
                color: $light_gray;
                height: 47px;
                &:-webkit-autofill {
                    -webkit-box-shadow: 0 0 0px 1000px $bg inset !important;
                    -webkit-text-fill-color: #fff !important;
                }
            }
        }
        .el-form-item {
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: rgba(0, 0, 0, 0.1);
            border-radius: 5px;
            color: #454545;
        }
        .logo-box {
            left: 50%;
            top: 50%;

            transform: translateY(-260px);
            margin-left: -100px;
            position: absolute;
        }
        .login-form {
            position: absolute;
            left: 0;
            right: 0;
            top: 50%;
            border-radius: 5px;
            transform: translateY(-300px);
            width: 520px;
            padding: 35px 35px 15px 35px;
            margin: 120px auto;
            border: 1px solid #fff;
        }
        .tips {
            font-size: 14px;
            color: #fff;
            margin-bottom: 10px;
            span {
                &:first-of-type {
                    margin-right: 16px;
                }
            }
        }
        .comText {
            color: #fff;
            font-size: 14px;
            text-align: center;
        }
        .svg-container {
            padding: 6px 5px 6px 10px;
            color: $dark_gray;
            vertical-align: middle;
            width: 30px;
            display: inline-block;
            &_login {
                font-size: 20px;
            }
        }
        .title {
            font-size: 22px;
            font-weight: 400;
            color: $light_gray;
            margin: 0px auto 40px auto;
            text-align: center;
            letter-spacing: 3px
        }
        .show-pwd {
            position: absolute;
            right: 10px;
            top: 7px;
            font-size: 16px;
            color: $dark_gray;
            cursor: pointer;
            user-select: none;
        }
    }
</style>
